﻿@{
    ViewBag.Title = "File Manager";
}
@section PreLoad{
    <script src="@Url.Content("~/IndependentComponent/DataTable/jquery.dataTables.js")"></script>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/IndependentComponent/DataTable/table.css")" />
    @if (ViewBag.devices.Count > 0)
    {
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#tableTrack').dataTable({
                });

            
                var url = "GetFileList/" + @ViewBag.devices[0].IDDEVICE ;
            $.ajax({
                type: "POST",
                url: url,
                data: {}
            }).done(function (msg) {
                $('#table').html(msg);
                $('#tableTrack').dataTable({
                    "aaSorting": [[0, "desc"]]
                });
            });

            


        });
        </script>
    }else
    {
        <script>
            alert("You have 0 device in account!!! We will redirect to Device Adding Page")
            window.location="AddDevice";
        </script>
    }
    <style type="text/css" title="currentStyle">
        
    </style>
}
<div style="margin: auto">
    @{Html.RenderPartial("../Shared/UserCPLeftMenu");}
    <center><h2>File Manager</h2></center>
    <p>
        Select device :
        <select id="selectDevice">
            @foreach (Device_Finder_MVC4.Models.DEVICE device in ViewBag.devices)
            {
                <option value="@device.IDDEVICE">@device.NAME </option>
            }
        </select>
    </p>
    <script>
        $('#selectDevice').change(function () {
            var url = "GetFileList/" + $('#selectDevice').val();
            $.ajax({
                type: "POST",
                url: url,
                data: {}
            }).done(function (msg) {
                $('#table').html(msg);
                $('#tableTrack').dataTable({
                    "aaSorting": [[0, "desc"]]
                });
            });


        });
    </script>
    <div id="table" style="width: 100%; float: left;">
    </div>
    <div id="showMap">
    </div>
</div>
<div style="clear: both">
</div>
